import { CSSProperties, computed, ref } from 'vue'
import hDialogConfig from '../config'
import useDialogStore from '@/store/modules/dialog'
import { SetDialogStyleParam } from './types'

const useStyle = () => {
  const getHeight = (width?: number) => {
    return Math.floor((width || hDialogConfig.defaultWidth) * hDialogConfig.longWithRatio)
  }

  const getWidth = (width?: number) => {
    return width || hDialogConfig.defaultWidth
  }

  const maskStyle = computed<CSSProperties>(() => {
    return {
      zIndex: useDialogStore().getZIndex,
    }
  })

  const _dialogStyle = ref<CSSProperties>({})

  const dialogStyle = computed(() => {
    return _dialogStyle.value
  })

  const setDialogStyle = (param: SetDialogStyleParam) => {
    _dialogStyle.value.minWidth = `${getWidth(param.minWidth)}px`
    _dialogStyle.value.minHeight = `${getHeight(param.minWidth)}px`
    _dialogStyle.value.transform = `translate(${param.transform.offsetX}px, ${param.transform.offsetY}px)`

    if (param.width) {
      _dialogStyle.value.width = `${param.width}px`
      _dialogStyle.value.height = `${getHeight(param.width)}px`
      _dialogStyle.value.minWidth = 'unset'
      _dialogStyle.value.minHeight = 'unset'
    }

    if (param.height) {
      _dialogStyle.value.height = `${param.height}px`
      _dialogStyle.value.minHeight = 'unset'
    }
  }

  const resetDialogStyle = (width?: number) => {
    _dialogStyle.value = {
      minWidth: `${getWidth(width)}px`,
      minHeight: `${getHeight(width)}px`,
      transform: `translate(0px, 0px)`,
    }
  }

  const hDialogContentStyle = ref<CSSProperties>({})

  return {
    maskStyle,
    dialogStyle,
    hDialogContentStyle,
    setDialogStyle,
    resetDialogStyle,
  }
}

export default useStyle
